<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta name="layout" content="main"/>
    <title>Insert title here</title>    
    <script src="../js/jstree/_lib/jquery.cookie.js"></script>  
    <script src="../js/jstree/_lib/jquery.hotkeys.js"></script>
    <script src="../js/jstree/jquery.jstree.js"></script>
    <script src="../js/templatedesing/json-serialization.js"></script>
    <script src="../js/templatedesing/jquery.archetypetree.js"></script>

    <script type="text/javascript">
            function myonlick(data){
                var node_id = data.rslt.obj.attr("id");                    
                alert("id : " + node_id + " path: " + data.rslt.obj.data('path') + " tipo: " + data.rslt.obj.data('tipo'));
            }
            function mydnd(data){
              $("#target").archetypeTree({    
                  controller:"home",
                  action:"list",
                  params:{nombreArchivo:data.o.data("nombreArchivo"),version:data.o.data("version"),path:data.o.data("path")},
                  dnd:false,
                  onclick:myonlick,
                  types:1
                });
            }
            $(document).ready(function() {
              $("#archetypes").archetypeTree({    
                  controller:"home",
                  action:"list",                  
                  dnd:"#target",
                  functionDND:mydnd
                });
            });
    </script>

  </head>
  <body>
    <div class="body">  	  	  	  	  
      <g:form useToken="true">
        <table cellpadding="20" cellspacing="20" border="1" bgcolor="#fffee">
          <tr style="height: 200px;">
            <td>   
              <div id="archetypes">
              </div> 
            </td>            
            <td style="width: 200px;">
              <div id="target" style="height: 200px;">
              </div>       
            </td>
          </tr>
        </table>
      </g:form>	
    </div>
  </body>
</html>
